<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" style="height: var(--status-bar-height);"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<view>登录</view>
			</view>
		</view>

		<view class="auth">
			<view class="wanl-title" style="text-align: center;">
				<image src="../../../static/images/default/logo.png" mode="widthFix" style="text-align: center;width: 194rpx;"></image>
			</view>
			<form @submit="formSubmit">
				<view class="auth-group radius-bock bg-white wlian-grey-light">
					<input 
						type="text"
						placeholder="输入手机号" 
						confirm-type="next" 
						maxlength="16"
						placeholder-class="placeholder" 
						name="account"
						:value="account"
					></input>
				</view>
				<view class="auth-group radius-bock bg-white wlian-grey-light">
					<input 
						type="text"
						placeholder="输入密码" 
						password="true" 
						confirm-type="done"
						maxlength="16"
						placeholder-class="placeholder" 
						name="password"
						@input="onKeyInput"
						v-model="password"
					></input>
				</view>

				<view class="auth-button flex flex-direction">
					<button class="cu-btn bg-orange sl radius-bock" form-type="submit" :disabled="submitDisabled" style="width: 624rpx;color: #fff;
height: 98rpx;
background: linear-gradient( 270deg, #EF430F 0%, #F17E19 100%);
border-radius: 16rpx 16rpx 16rpx 16rpx;">立即登录</button>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<view class="text-left" >
						没有账号，<text style="color: #EF430F;" @tap="register">去注册</text>
					</view>
					<view class="text-right" @tap="retrieve">
						忘记密码
					</view>
				</view>

<!-- 				<view class="text-center" @tap="phone">
					短信验证码登录
				</view> -->

			</form>
		</view>
		<view class="auth-foot" style="align-items: flex-start;bottom: 30rpx;">
<!-- 			<view class="menu text-grey">
				<text @tap="register">注册</text>
				<text @tap="help">帮助</text>
			</view> -->
			<checkbox-group :class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause" @change="CheckboxChange" style="margin-top: 20rpx;margin-left: -10rpx">
				<checkbox class="orange" :class="checked == 2 ? 'checked' : ''" :checked="checked == 2 ? true : false" value="2" />
				<view>
					登录即代表同意<text @tap="onDetails($store.state.common.appConfig.user_agreement, '用户协议')">《用户协议》</text>及<text @tap="onDetails($store.state.common.appConfig.privacy_protection, '隐私保护')">《隐私政策》</text>
				</view>
			</checkbox-group>
		</view>
	</view>
</template>
<script>
import graceChecker from '@/common/graceChecker';//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
export default {
	data() {
		return {
			submitDisabled: true,
			account: '',
			pageroute: '',
			password:'',
			checked: 0,
		};
	},
	onLoad(option){
		// 用户名
		this.account = option.name;
		this.pageroute = option.url || '/pages/user';
	},
	methods: {
		CheckboxChange(e) {
			this.checked = e.detail.value;
		},
		onKeyInput: function(e) {
			this.submitDisabled = false
		},
		formSubmit: function(e) {
			if (this.checked != 2) {
				this.checked = 1;
				setTimeout(() => {
					this.checked = 0;
					this.$wanlshop.msg('请先同意用户协议和隐私保护声明');
					this.checked = ['2'];
				}, 300)
				return false
			}
			//定义表单规则
			var rule = [
				{ name: 'account', checkType: 'notnull', errorMsg: '请输入用户名' },
				{ name: 'password', checkType: 'string', checkRule: '6,16', errorMsg: '密码至少6位' }
			];
			//进行表单检查
			var formData = e.detail.value;
			var checkRes = graceChecker.check(formData, rule);
			if (checkRes) {
				uni.request({
					url: '/wanlshop/user/login', 
					method: 'POST',
					data: {
						account: formData.account,
						password: formData.password,
						client_id: uni.getStorageSync("wanlshop:chat_client_id")?uni.getStorageSync("wanlshop:chat_client_id") : null
					},
					// 1.1.8升级
					success: res => {
						this.$store.dispatch('user/login', res.data);
						this.$store.dispatch('cart/login');
						this.$store.dispatch('chat/get');
						uni.reLaunch({url: decodeURIComponent(this.pageroute)});
					}
				});
			} else {
				this.$wanlshop.msg(graceChecker.error);
			}
		},
		retrieve(){
			this.$wanlshop.to(`retrieve?url=${this.pageroute}`);
		},
		phone() {
			this.$wanlshop.to(`phone?url=${this.pageroute}`);
		},
		register() {
			this.$wanlshop.to(`register?url=${this.pageroute}`);
		},
		help() {
			this.$wanlshop.to(`/pages/user/help?url=${this.pageroute}`);
		}
	}
};
</script>

<style>
	@import url("auth.css");
</style>
